/*
 * @Author: yuanxiang 
 * @Date: 2018-05-14 16:28:39 
 * @Last Modified by: yuanxiang
 * @Last Modified time: 2018-05-14 16:29:01
 */
<template>
    <div  class="topNavArr">
        <div ref="topNavs" class="topNavs" :style="{width:barWidth}">
            <div class="topNavaArrItem" :class="{active:id == nowId}" @click="onNav(item.id,id)" v-for="(item,id) in topNav" :key="id">
            <div :ref="'item'+id">{{item.name}}</div>
            </div>
            <div ref="topBottomLine" :style="{left: offsetL +'px',width: itemW+'px'}" class="topBottomLines"></div>
        </div>
    </div>
</template>
<script>
//  dataArr 需要的
export default {
  name: "topBarSel",
  props: {
    topNav: {
      type: Array,
      require: true
    },
    barWidth: {
      type: String,
      default: "67%"
    }
  },
  data() {
    return {
      nowId: 0,
      offsetL: 0, //  子组件相对父组件偏移量
      itemW: 0 // 子组件宽度
    };
  },
  mounted() {
    this.onNav("1", 0);
  },
  methods: {
    onNav(itemId, id) {
      this.nowId = id;
      var itemW = this.$refs["item" + id][0].offsetWidth - 10;
      var itemL = this.$refs["item" + id][0].offsetLeft + 5; // 当前元素距离父节点的左边 水平距离 ,距离父节点的偏移量
      this.$set(this, "offsetL", itemL);
      this.$set(this, "itemW", itemW);
      this.$emit("changeTab", itemId);
    }
  }
};
</script>
<style scoped>
.topBottomLines {
  bottom: -6pt;
  transition: left 0.5s;
  left: 0;
  height: 3px;
  background: #31cee6;
  position: absolute;
}
.active {
  font-weight: bold;
}
.topNavArr {
  width: 100%;
  display: flex;
  height: 79px;
  align-items: flex-end;
  justify-content: center;
}
.topNavs {
  position: relative;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12pt;
}
.topNavaArrItem {
  display: flex;
  color: rgba(49, 206, 230, 0.8);
  font-size: 18px;
  cursor: pointer;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 13px;
  height: 16px;
  border-left: 1px solid rgba(49, 206, 230, 0.2);
}
.topNavaArrItem:nth-child(1) {
  border-left: 0;
}
</style>
